<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Execute Python Script</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse; /* 合并相邻边框 */
        }

        th, td {
            text-align: left;
            padding: 8px;
            border: 2px solid #ddd; /* 添加边框线 */
        }

        tr:nth-child(even) {
            background-color: #f2f2f2; /* 偶数行背景色 */
        }
    </style>
</head>
<body>
    <button onclick="executeScript()">Execute Python Script</button>
    <div id="result"></div>
    <button id="getOddsBtn1">Get LSTM Odds</button>
    <div id="odds-lstm"></div>
    <button id="getOddsBtn2">Get XGBOOST Odds</button>
    <div id="odds-xgboost"></div>
    <script>
        function executeScript() {
            var xhr = new XMLHttpRequest();
            xhr.open('POST', '/execute_script', true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var response = JSON.parse(xhr.responseText);
                    document.getElementById('result').innerHTML = response.result;
                }
            };
            xhr.send();
        }

        document.getElementById('getOddsBtn1').addEventListener('click', getLstmOdds);
        async function getLstmOdds() {
            try {
                // 发送GET请求获取另一个数据页面的内容
                const response = await fetch('/get_lstm_odds');
                const data = await response.json();
                const newPageContent = `<h1>Additional Lstm Data Page</h1>
                                        <table id="data-container">
                                            <thead>
                                                <tr>
                                                    <th>league</th>
                                                    <th>bs_num_id</th>
                                                    <th>bs_time</th>
                                                    <th>hometeam</th>
                                                    <th>awayteam</th>
                                                    <th>home_odd</th>
                                                    <th>draw_odd</th>
                                                    <th>away_odd</th>
                                                    <th>home</th>
                                                    <th>draw</th>
                                                    <th>away</th>
                                                    <!-- 添加其他表头 -->
                                                    <th>pred_home</th>
                                                    <th>pred_draw</th>
                                                    <th>pred_away</th>
                                                    <th>predict</th>
                                                    <th>pred</th>
                                                    <th>valueBet</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                ${data.map(row => `
                                                    <tr>
                                                        <td>${row.league}</td>
                                                        <td>${row.bs_num_id}</td>
                                                        <td>${row.bs_time}</td>
                                                        <td>${row.hometeam}</td>
                                                        <td>${row.awayteam}</td>
                                                        <td>${row.home_odd}</td>
                                                        <td>${row.draw_odd}</td>
                                                        <td>${row.away_odd}</td>
                                                        <td>${row.home}</td>
                                                        <td>${row.draw}</td>
                                                        <td>${row.away}</td>
                                                        <td>${row.pred_home}</td>
                                                        <td>${row.pred_draw}</td>
                                                        <td>${row.pred_away}</td>
                                                        <td>${row.predict}</td>
                                                        <td>${row.pred}</td>
                                                        <td>${row.valueBet}</td>
                                                    </tr>
                                                `).join('')}
                                            </tbody>
                                        </table>`;

                // 将新页面内容添加到当前页面中
                document.getElementById('odds-lstm').innerHTML = newPageContent;
            } catch (error) {
                console.error('Error fetching data:', error);
                // 在这里添加显示错误消息的代码
            }
        }


        document.getElementById('getOddsBtn2').addEventListener('click', getXgboostOdds);
        async function getXgboostOdds() {
            try {
                // 发送GET请求获取另一个数据页面的内容
                const response = await fetch('/get_xgboost_odds');
                const data = await response.json();
                const newPageContent = `<h1>Additional Xgboost Data Page</h1>
                                        <table id="data-container">
                                            <thead>
                                                <tr>
                                                    <th>league</th>
                                                    <th>bs_num_id</th>
                                                    <th>bs_time</th>
                                                    <th>hometeam</th>
                                                    <th>awayteam</th>
                                                    <th>home_odd</th>
                                                    <th>draw_odd</th>
                                                    <th>away_odd</th>
                                                    <th>home_prob</th>
                                                    <th>draw_prob</th>
                                                    <th>away_prob</th>
                                                    <!-- 添加其他表头 -->
                                                    <th>pred_home_3</th>
                                                    <th>pred_draw_3</th>
                                                    <th>pred_away_3</th>
                                                    <th>pred_3class</th>
                                                    <th>forward</th>
                                                    <th>reverse</th>
                                                    <th>book_ward</th>
                                                    <th>pred_2class</th>
                                                    <th>valueBet</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                ${data.map(row => `
                                                    <tr>
                                                        <td>${row.league}</td>
                                                        <td>${row.bs_num_id}</td>
                                                        <td>${row.bs_time}</td>
                                                        <td>${row.hometeam}</td>
                                                        <td>${row.awayteam}</td>
                                                        <td>${row.home_odd}</td>
                                                        <td>${row.draw_odd}</td>
                                                        <td>${row.away_odd}</td>
                                                        <td>${row.home_prob}</td>
                                                        <td>${row.draw_prob}</td>
                                                        <td>${row.away_prob}</td>
                                                        <td>${row.pred_home_3}</td>
                                                        <td>${row.pred_draw_3}</td>
                                                        <td>${row.pred_away_3}</td>
                                                        <td>${row.pred_3class}</td>
                                                        <td>${row.forward}</td>
                                                        <td>${row.reverse}</td>
                                                        <td>${row.book_ward}</td>
                                                        <td>${row.pred_2class}</td>
                                                        <td>${row.valueBet}</td>
                                                    </tr>
                                                `).join('')}
                                            </tbody>
                                        </table>`;

                // 将新页面内容添加到当前页面中
                document.getElementById('odds-xgboost').innerHTML = newPageContent;
            } catch (error) {
                console.error('Error fetching data:', error);
                // 在这里添加显示错误消息的代码
            }
        }


    </script>
</body>
</html>